<template>
  <el-dialog
    :custom-class="isMobile ? 'mobile' : ''"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    width="600px"
    append-to-body
    :close-on-press-escape="false"
  >
    <div class="form-info">
      <base-map-search
        ref="mapSearch"
        :city="form.city"
        :value="form.address"
        :longitude="form.addLon"
        :latitude="form.addLat"
        :isEdit="isEdit"
        @updateLocation="updateLocation"
      />
      <div class="disFlxCC pt-20">
        <el-button type="primary" size="default" @click="confirmChange">确认选择</el-button>
      </div>
      <!-- <el-row>
          <el-col :span="12">
            <el-form-item prop="addLon" label="经度">
              <el-input
                v-model.number="form.addLon"
                :maxlength="15"
                placeholder="请输入经度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-label-form-item">
            <el-form-item prop="addLat" label="纬度">
              <el-input
                v-model.number="form.addLat"
                :maxlength="15"
                placeholder="请输入纬度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
    </div>
  </el-dialog>
</template>
<script>
import BaseMapSearch from "./baseMapSearch.vue";
export default {
  props: ["visible", "isEdit", "detail"],
  components: {
    BaseMapSearch,
  },
  data() {
    return {
      title: "选择地址",
      form: {
        address: "",
        addLon: "",
        addLat: "",
      },
    };
  },
  created() {
    if (this.isEdit) {
      this.initForm();
    }
  },
  computed: {
    preview(){
      return this.$route.query.preview || ""
    },
    isMobile(){
      let userAgentInfo = navigator.userAgent;
      let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      let getArr = Agents.filter(i => userAgentInfo.includes(i));
      return !!getArr.length
    }
  },
  methods: {
    // 初始化表单
    initForm() {
      this.title = "修改地址";
      if (this.detail) {
        this.form = { ...this.detail };
      }
    },
    // 地图搜索选址
    updateLocation(lng, lat, address) {
      this.form.addLon = lng;
      this.form.addLat = lat;
      this.form.address = address;
    },
    handleClose() {
      if(this.$store.state.customForm.mapShow){
        this.$store.commit('SET_MAPSHOW',{show: false})
      }else{
        this.$emit("update:visible", false);
      }
    },
    // 确认选择地址
    confirmChange(){
        const that = this
        let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
        });
        geocoder.getAddress([this.form.addLon, this.form.addLat], function (status, result) {
            if(result.info && result.info === "OK"){
                const { adcode } = result.regeocode.addressComponent
                let areaList = [
                    adcode[0] + adcode[1] + '0000000000',
                    adcode[0] + adcode[1] + adcode[2] + adcode[3] + '00000000',
                    adcode + '000000'
                ]
                that.$emit("handelAddress", { areaList, address: that.form.address });
                that.handleClose()
            }
        });
    }
  },
};
</script>
<style scoped>

</style>
